<template>
  <!-- 唯一性验证 -->
  <div>
    <el-form ref="form" :rules="rules" :size="optionButtonSize" label-position="top" :model="form">
      <el-form-item :label="$t('institutionSetting.jigou43') + '：'" prop="businessLicenseFile">
        <el-image v-if="form.businessLicenseFile" style="width: 100px; height: 100px; border-radius: 6px"
          :src="form.businessLicenseFile || ''" />
        <el-upload class="upload-demo" action="" accept=".JPG,.PNG,.JPEG,.BMP,.WebP" :before-upload="beforeAvatarUpload"
          :on-change="handleelchange" :auto-upload="false" :show-file-list="false">
          <el-button size="small" type="primary">{{ $t('institutionSetting.jigou44') }}</el-button>
        </el-upload>
        <div style="margin-top: 8px" class="bottom_tip">
          {{ $t('institutionSetting.jigou45') }}
        </div>
        <!-- <el-upload class="upload_file" drag action="#" multiple>
                    <div class="upload_file_inner" slot="trigger">
                        <span>添加附件将文件拖到此处，或者</span>
                        <img src="@/assets/img/order_upload.png" alt="">
                        <span>点击上传</span>
                    </div>
                    <div class="bottom_tip" slot="tip">营业执照只支持JPG、PNG、JPEG、BMP、WebP等图片格式，大小不超过3M</div>
                </el-upload> -->
      </el-form-item>
      <el-form-item :label="$t('institutionSetting.jigou46') + '：'" prop="organizedName">
        <el-input v-model="form.organizedName" style="width: 500px" placeholder="" />
      </el-form-item>
      <el-form-item :label="$t('institutionSetting.jigou47') + '：'" prop="socialCreditCode">
        <el-input v-model="form.socialCreditCode" style="width: 500px" placeholder="" />
      </el-form-item>
      <el-form-item :label="$t('institutionSetting.jigou48') + '：'" prop="address">
        <el-input v-model="form.address" style="width: 500px" placeholder="" />
      </el-form-item>
      <el-form-item :label="$t('institutionSetting.jigou49') + '：'" prop="medicalLicenseFile">
        <el-image v-if="form.medicalLicenseFile" style="width: 100px; height: 100px; border-radius: 6px"
          :src="form.medicalLicenseFile || ''" />
        <el-upload class="upload-demo" action="" accept=".JPG,.PNG,.JPEG,.BMP,.WebP" :on-change="handleelchange2"
          :auto-upload="false" :show-file-list="false">
          <el-button size="small" type="primary">{{ $t('institutionSetting.jigou50') }}</el-button>
        </el-upload>
        <div style="margin-top: 8px" class="bottom_tip">
          {{ $t('institutionSetting.jigou51') }}
        </div>
      </el-form-item>
      <el-form-item :label="$t('institutionSetting.jigou52') + '：'" prop="registerNo">
        <el-input v-model="form.registerNo" style="width: 500px" placeholder="" />
      </el-form-item>
      <el-form-item v-if="$config.isShowReputation" :label="$t('institutionSetting.jigou53') + '：'" prop="statementFile">
        <el-image v-if="form.statementFile" style="width: 100px; height: 100px; border-radius: 6px"
          :src="form.statementFile || ''" />
        <el-upload class="upload-demo" action="" accept=".JPG,.PNG,.JPEG,.BMP,.WebP" :on-change="handleelchange3"
          :auto-upload="false" :show-file-list="false">
          <el-button size="small" type="primary">{{ $t('institutionSetting.jigou50') }}</el-button>
        </el-upload>
        <div class="bottom_tip" style="margin-top: 8px">
          {{ $t('institutionSetting.jigou54') }}
        </div>
      </el-form-item>
      <el-form-item :label="$t('institutionSetting.jigou55') + '：'" prop="">
        <el-input v-model="form.remark" type="textarea" style="width: 500px" placeholder="" />
      </el-form-item>
      <el-form-item :label="$t('institutionSetting.jigou56') + '：'" prop="">
        <div class="bottom_tip">
          <p>{{ $t('institutionSetting.jigou57') }}</p>
          <p>{{ $t('institutionSetting.jigou58') }}</p>
          <p v-show="$config.isShowReputation">{{ $t('institutionSetting.jigou59') }}</p>
          <p v-show="$config.isShowReputation">{{ $t('institutionSetting.jigou60') }}</p>
          <p v-show="$config.isShowReputation">{{ $t('institutionSetting.jigou61') }}</p>
          <p v-show="$config.isShowReputation">{{ $t('institutionSetting.jigou62') }}</p>
          <p v-show="$config.isShowReputation">{{ $t('institutionSetting.jigou63') }}</p>
        </div>
      </el-form-item>
    </el-form>
    <div class="option">
      <el-button type="primary" :size="optionButtonSize" @click="submitHandle">{{
        $t('institutionSetting.jigou64')
      }}</el-button>
      <el-button plain :size="optionButtonSize" @click="resetHandle">{{
        $t('institutionSetting.jigou65')
      }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BLZMasterUnique',

  data() {
    return {
      form: {
        address: '', // 住所
        businessLicenseFile: '', // 营业执照
        createDate: '',
        creator: 0,
        deptId: 0, // 机构id
        id: 0,
        medicalLicenseFile: '', // 医疗机构许可证
        organizedName: '', // 机构名称
        registerNo: '', // 登记号
        remark: '', // 备注 其他说明
        socialCreditCode: '', // 统一社会信用代码
        statementFile: '', // 声明函
        status: 0, // 状态
        updateDate: '',
        updater: 0,
      },
      rules: {
        businessLicenseFile: [
          {
            required: true,
            message: this.$t('institutionSetting.jigou69'),
            trigger: 'blur',
          },
        ],
        organizedName: [{ required: true, message: this.$t('add.add034'), trigger: 'blur' }],
        socialCreditCode: [
          {
            required: true,
            message: this.$t('institutionSetting.jigou73'),
            trigger: 'blur',
          },
        ],
        address: [{ required: true, message: this.$t('institutionSetting.jigou68'), trigger: 'blur' }],
        medicalLicenseFile: [
          {
            required: true,
            message: this.$t('institutionSetting.jigou106'),
            trigger: 'blur',
          },
        ],
        registerNo: [
          {
            required: true,
            message: this.$t('institutionSetting.jigou72'),
            trigger: 'blur',
          },
        ],
       
      },
    };
  },

  created() {
    this.getVerify();

    if(this.$config.isShowReputation){
      this.rules['statementFile'] = [
        {
            required: true,
            message: this.$t('institutionSetting.jigou74'),
            trigger: 'blur',
          },
      ];
    }
  },

  methods: {
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpg' ||
        file.type === 'image/bmp' ||
        file.type === 'webp';
      const isLt2M = file.size / 1024 / 1024 < 3;
      console.log('file------------', isJPG, isLt2M, file);
      if (!isJPG) {
        return this.$message.error(this.$t('institutionSetting.jigou66'));
      }
      if (!isLt2M) {
        return this.$message.error(this.$t('institutionSetting.jigou67'));
      }
      // const isSize = new Promise(function (resolve, reject) {
      //     const width = 744 // 限制图片尺寸为744x208
      //     const height = 208
      //     const URL = window.URL || window.webkitURL
      //     const img = new Image()
      //     img.onload = function () {
      //         const valid = img.width === width && img.height === height
      //         valid ? resolve() : reject()
      //     }
      //     img.src = URL.createObjectURL(file)
      // }).then(
      //     () => {
      //         return file
      //     },
      //     () => {
      //         this.$message.error('图片不规范，请按要求上传')
      //         return Promise.reject()
      //     }
      // )
    },
    handleelchange(file, fileList) {
      const formData = new FormData();
      fileList.map((item) => {
        // fileList本来就是数组，就不用转为真数组了
        formData.append('file', item.raw, Date.now() + '.jpeg'); // 将每一个文件图片都加进formdata
      });
      this.$http
        .post('/tools/upload', formData)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.form.businessLicenseFile = res.data.filepath;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    handleelchange2(file, fileList) {
      const formData = new FormData();
      fileList.map((item) => {
        // fileList本来就是数组，就不用转为真数组了
        formData.append('file', item.raw, Date.now() + '.jpeg'); // 将每一个文件图片都加进formdata
      });
      this.$http
        .post('/tools/upload', formData)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.form.medicalLicenseFile = res.data.filepath;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    handleelchange3(file, fileList) {
      const formData = new FormData();
      fileList.map((item) => {
        // fileList本来就是数组，就不用转为真数组了
        formData.append('file', item.raw, Date.now() + '.jpeg'); // 将每一个文件图片都加进formdata
      });
      this.$http
        .post('/tools/upload', formData)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.form.statementFile = res.data.filepath;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    getVerify() {
      this.$http
        .get('/sys/organized/getVerify')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.form = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 保存
    submitHandle() {
      // if (!this.form.address) {
      //   return this.$message.error(this.$t('institutionSetting.jigou68'));
      // } else if (!this.form.businessLicenseFile) {
      //   return this.$message.error(this.$t('institutionSetting.jigou69'));
      // } else if (!this.form.medicalLicenseFile) {
      //   return this.$message.error(this.$t('institutionSetting.jigou70'));
      // } else if (!this.form.organizedName) {
      //   return this.$message.error(this.$t('institutionSetting.jigou71'));
      // } else if (!this.form.registerNo) {
      //   return this.$message.error(this.$t('institutionSetting.jigou72'));
      // } else if (!this.form.socialCreditCode) {
      //   return this.$message.error(this.$t('institutionSetting.jigou73'));
      // } else if (!this.form.statementFile) {
      //   return this.$message.error(this.$t('institutionSetting.jigou74'));
      // }

      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$http
            .put('sys/organized/updateVerify', this.form)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('institutionSetting.jigou75'));
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        }
      });

    },
    resetHandle() {
      this.getVerify();
    },
  },
};
</script>

<style lang="scss">
.upload_file {
  .el-upload {
    text-align: left;

    .el-upload-dragger {
      height: 33px;
      background: rgba(244, 244, 244, 0.39);
      width: 500px;
      border: 1px solid #d9d9d9;

      .upload_file_inner {
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 10px;

        span:nth-of-type(1) {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #999999;
        }

        img {
          // background-color: red;
          width: 13px;
          height: 16px;
        }

        span:nth-of-type(2) {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #003e67;
        }
      }
    }
  }
}

.bottom_tip {
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  color: #999999;
  width: 500px;
}

.option {
  padding-bottom: 33px;
}
</style>
